<!--分产品-->
<template>
  <div class="qualityStatement">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
       <span v-if="form.type_property == 0">
           <el-form-item label="选择区域">
              <dx-cascader :area_id.sync="form.areaId"/>
           </el-form-item>
           <el-form-item label="账期" class="timeSection">
             <el-date-picker v-model="form.startAcctMonth"  value-format="yyyyMM" type="month"  placeholder="选择月"></el-date-picker>
             <span>~</span>
             <el-date-picker v-model="form.endAcctMonth"  value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
          </el-form-item>

        </span>
        <span v-if="form.type_property == 1">
          <el-form-item label="选择区域">
             <dx-cascader :area_id.sync="form.areaId"/>
          </el-form-item>
          <el-form-item label="账期">
             <el-date-picker
                v-model="form.acctMonth"
                value-format="yyyyMM"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
        </span>
        <el-form-item class="annual">
          <el-radio-group v-model="form.type_property">
               <el-radio  v-for="(item,index) in propertyOptions" :key="item.index" :label="item.index" @change="changeLabel()">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="search">
          <el-button size="small" type="primary" @click="getUserQualityListByAreaId">查询</el-button>
          <el-button size="small" class="paddRig" type="orange"   v-if="form.type_property == 0"  @click="batchxport">批量导出</el-button>
          <el-button size="small" class="paddRig" type="orange" @click="exportModal">导出</el-button>
        </el-form-item>
<!--        <el-form-item class="daochu">

        </el-form-item> -->
      </el-form>
    </div>
   <div class="tableBox" v-if="form.type_property == 0">
      <el-table  v-loading="tableLoading" :data="tableData" border stripe
                 style="width: 100%" class="tableTh28" height="67vh" :span-method="arraySpanMethod" ref="table">
    <el-table-column label="大类" prop="class1" class-name="first-title" min-width="100" fixed></el-table-column>
    <el-table-column label="指标名称" prop="indexName" class-name="second-title" min-width="100" fixed></el-table-column>
    <el-table-column label="单位" prop="unit"  ></el-table-column>
    <el-table-column v-for="(item,index) in countList" :key="index" :label="item" :prop="'indexValue'+(index)"></el-table-column>

      </el-table>
    </div>

    <div class="tableBox" v-if="form.type_property == 1">
       <el-table  v-loading="tableLoading" :data="tableData1" border stripe
                  style="width: 100%" class="tableTh28" height="67vh" :span-method="arraySpanMethod" ref="table">
     <el-table-column label="大类" prop="class1" class-name="first-title" min-width="100" fixed></el-table-column>
     <el-table-column label="指标名称" prop="indexName" class-name="second-title" min-width="100" fixed></el-table-column>
      <el-table-column label="单位" prop="unit"  ></el-table-column>
     <el-table-column v-for="(item,index) in countList1" :key="index" :label="item" :prop="'indexValue'+(index)"></el-table-column>

       </el-table>
     </div>
  </div>
</template>

<script>
  import{ $budgetAPI} from '@/api';
  import {getSessionStorage} from "@/common/js/storage";
  import prefixAPI from "@/api/prefixAPI";
  import { mergeTableRow, mergeSpan } from "@/utils/mixin";
  import { getCookie} from "@/common/js/cookie"
  export default {
    name: "qualityStatement",
    data(){
      return{
        form:{
          areaId:"",
          acctMonth:"",
          type_property:0,
          startAcctMonth:'',
          endAcctMonth:'',
        },
        propertyOptions: [
          {"index":0,"value":'分账期'},
          {"index":1,"value":'分区域'}
        ],
        accountInfo:"",
        areaList:[],
        spanArr: [],
        spanArr1: [],
        tableLoading:false,
        tableData:[],
        tableData1:[],
        count:'',
        countList:[],
        countList1:[],
        time:Date.parse(new Date()),
      }
    },
    created(){
       this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
      this.form.areaId = this.accountInfo.areaId;
      // this.form.month = this.moment().subtract(1,'months').format('YYYYMM')

    },
    mounted(){
     // this.getProMaxAcctMonth();
      this.getMonth()
      // this.init();

    },
    methods:{
      changeLabel(){
         this.init();
      },
      //分产品导出

    exportModal() {
      let areaId = this.form.areaId;
      let acctMonth = this.form.acctMonth;
      let startAcctMonth = this.form.startAcctMonth;
      let endAcctMonth = this.form.endAcctMonth;
      let token = getCookie('token');
      if(this.form.type_property == 0){

        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            `/api/UserQualityReport/exporUserQualityByAreaId?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
           `/api/UserQualityReport/exporUserQualityByAreaId?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&token=${token}`;
        }
      } if(this.form.type_property == 1){
        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            `/api/UserQualityReport/exportCorePlatformIncomeByAcctMonth?areaId=${areaId}&acctMonth=${acctMonth}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            `/api/UserQualityReport/exportCorePlatformIncomeByAcctMonth?areaId=${areaId}&acctMonth=${acctMonth}&token=${token}`;
        }
      }
    },
    // 批量导出
    batchxport(){
    let areaId = this.form.areaId;
    let startAcctMonth = this.form.startAcctMonth;
    let endAcctMonth = this.form.endAcctMonth;
    let token = getCookie('token');
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/UserQualityReport/batchExportUserQualityByAreaId?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&token=${token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          `/api/UserQualityReport/batchExportUserQualityByAreaId?areaId=${areaId}&startAcctMonth=${startAcctMonth}&endAcctMonth=${endAcctMonth}&token=${token}`;
      }

      // 根据不同模式切换不同的路径

    },
      //获取当前时间
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y.toString() + MM.toString() ;
      },
      //table合并行
     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         if(this.tableData.length>0 || this.tableData1.length>0){
             if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
                 return this.spanArr[rowIndex][columnIndex];
             }
         }

     },

      //区域选择 返回ID和name
      areaChange(vId) {
        // vID 是一个数组，循环获取name,根据id
        if (!vId && vId.length === 0) {
          return;
        }//这里多选的时候获取name和单选不一样 单选是对象 多选是数组所以...
        let nameArr = [];
        let codeArr = [];
        let that = this;
        vId.forEach(element => {
          let obj = that.areaList.find((item) => {
            return item.areaId === element;
          });
          if (obj) {
            nameArr.push(obj.areaName);
            codeArr.push(obj.areaId);

          }
        });
      },
      //根据层级获取区域树
      getCompanyByLvl(){
        $budgetAPI.getCompanyByLvl({
          lvl:this.accountInfo.areaLvl,
          areaId:this.accountInfo.areaId
        },res =>{
          this.alertError(res);
          this.areaList = res.content;
        },err =>{

        })
      },
      //分账期获取列表
      getUserQualityListByAreaId(params){
        this.tableData = [];
        let obj = {};
        if(this.form.areaId){
          obj = this.form
        }else {
          obj = params
        }
        this.tableLoading = true;
        if(this.form.type_property == 0){
         var that=this
          $budgetAPI.getUserQualityListByAreaId(obj,res=>{
            this.alertError(res);
            if(res.code == 0){
              that.countList=res.content.dateAreaList;
              res.content.data.map((item,index)=>{
               item.dataList.map((ele,ind) => {
                   item['indexValue'+ind] = ele.indexValue
               })
              });
                that.tableData = res.content.data;

                this.spanArr = mergeSpan( that.tableData, [
                  "class1",
                  "indexName",
                ]);
              that.tableLoading = false;
              setTimeout(()=>{
                // this.$refs.table.doLayout();
              },500);
            }
          },err=>{

          })
        }else if(this.form.type_property == 1){
        var that=this
          $budgetAPI.getUserQualityListByAcctMonth(obj,res=>{
            this.alertError(res);
            if(res.code == 0){
              that.countList1=res.content.areaNames;
              res.content.data.map((item,index)=>{
               item.dataList.map((ele,ind) => {
                   item['indexValue'+ind] = ele.indexValue
               })
              });
                that.tableData1 = res.content.data;
                this.spanArr = mergeSpan( that.tableData1, [
                  "class1",
                  "indexName",
                ]);
              that.tableLoading = false;
              setTimeout(()=>{
                // this.$refs.table.doLayout();
              },500);
            }
          },err=>{

          })
        }

      },
      init(){
        if(this.form.type_property == 0){
           let params ={
            areaId:this.accountInfo.areaId,
            startAcctMonth:this.form.startAcctMonth,
            endAcctMonth:this.form.endAcctMonth,
          };
          this.getUserQualityListByAreaId(params)
          }else if(this.form.type_property == 1){
            let params ={
                areaId:this.accountInfo.areaId,
                acctMonth:this.form.acctMonth,
              };

            this.getUserQualityListByAreaId(params)
          }
        // this.getCompanyByLvl();

      },
      // getProMaxAcctMonth(){
      //    $budgetAPI.getProMaxAcctMonth( {},
      //     res => {
      //        if (res && res.code == 0) {
      //           this.form.acctMonth=res.content;
      //           // this.init();
      //        }
      //         },
      //         err => {
      //         }
      //       );
      //   },

        //获取账期
        getMonth(){
          let areaId = this.form.areaId;
          let that = this;
         $budgetAPI.getMonth(
         {areaId:areaId},
         res=>{
             if (res||res.code == 0) {
               that.form.endAcctMonth = res.content.maxAcctMonth;
               that.form.startAcctMonth = res.content.preSixMonth;
               that.form.acctMonth = res.content.maxAcctMonth;
                this.init();
             }
         }, err => {}
         )
        },
    }
  }
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
  .qualityStatement{

    .operation{
      .search{width:24%;float: right;
       .el-form-item__content{
          width: 100%;
          .paddRig{margin-left: 10px !important;}
       }}
      .annual{
        width: 17%;
        .el-form-item__content{
           width: 100%;
           .paddRig{margin-right: 10px !important;}
        }
      }
      .timeSection{
        width: 34%;
        .el-form-item__content{
          .el-date-editor{
            width:46%;
          }

        }

      }
    }
  }
</style>
